<template>
    <div class="setup-view">
        <div class="setup-change">
            <div class="setup-change-title">
                <div class="title-text">修改密码</div>
                <div class="button-text"><el-button  @click="dialogVisible = true" type="text">修改</el-button></div>
            </div>
            <div class="setup-change-msg">帐号存在被盗风险，建议您定期更改密码心保护帐户安全。</div>
        </div>
        <div class="setup-change">
            <div class="setup-change">
                <div class="setup-change-title">
                    <div class="title-text">经纪人查看范围</div>
                    <div class="button-text">
                        <el-switch v-model="value3" @change="getswitch">
                        </el-switch>
                    </div>
                </div>
                <div class="setup-change-msg">设置经纪人查看范围，打开只可查看经纪人所属分销商的楼盘，关闭可查看您名下的所有楼盘</div>
            </div>
        </div>
        <!--<div class="setup-change">-->
            <!--<div class="setup-change">-->
                <!--<div class="setup-change-title">-->
                    <!--<div class="title-text">开通价格设置</div>-->
                    <!--<div class="button-text"> <el-switch v-model="value4"></el-switch></div>-->
                <!--</div>-->
                <!--<div class="setup-change-msg">允许下级设置楼盘开通价格，打开则下级可以设置楼盘开通价我，关闭则不可设置开通楼盘价格。</div>-->
            <!--</div>-->
        <!--</div>-->
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="10%" :show-close="showimg">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item  prop="oldPwd">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title"><span>*</span>输入老密码：</div>
                            <div>
                                <el-input
                                        type="password"
                                        class="addForm-form-input-input"
                                        placeholder="请输入密码"
                                        v-model="ruleForm.oldPwd"
                                        clearable>
                                </el-input>
                            </div>
                        </div>
                </el-form-item>
                <el-form-item  prop="newPwd">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title"><span>*</span>输入新密码：</div>
                        <div>
                            <el-input
                                    type="password"
                                    class="addForm-form-input-input"
                                    placeholder="请输入密码"
                                    v-model="ruleForm.newPwd"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item  prop="rePwd">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title"><span>*</span>再次输入密码：</div>
                        <div>
                            <el-input
                                    type="password"
                                    class="addForm-form-input-input"
                                    placeholder="请输入密码"
                                    v-model="ruleForm.rePwd"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-button" @click="resetForm('ruleForm')" >取 消</el-button>
                <el-button class="sure-button" type="primary" @click="addstruct('ruleForm')">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {numberLetter,telePhone,password} from "../../utils/regular"
    export default {
        name: "setup",
        data(){
            var validateoldPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入老密码'));
                } else if(value.length<6||value.length>18){
                    callback(new Error('密码长度在 6到 18 个字符'));
                }else if (!password(value)) {
                    callback(new Error('密码由数字和字母和特殊符合组成'));
                }  else {
                    callback();
                }
            };
            var validatenewPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                }else if(value.length<6||value.length>18){
                    callback(new Error('密码长度在 6到 18 个字符'));
                }else if (!password(value)) {
                    callback(new Error('密码由数字和字母和特殊符合组成'));
                } else {
                    callback();
                }
            };
            var validaterePwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                }else if(value.length<6||value.length>18){
                    callback(new Error('密码长度在 6到 18 个字符'));
                }else if (!password(value)) {
                    callback(new Error('密码由数字和字母和特殊符合组成'));
                }else if (value !== this.ruleForm.newPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                value3: true,
                value4: true,
                dialogVisible:false,
                showimg:false,
                ruleForm:{
                    oldPwd:"",
                    newPwd:"",
                    rePwd:"",
                },
                rules: {
                    oldPwd: [
                        { validator: validateoldPwd, trigger: 'blur' }
                    ],
                    newPwd: [
                        { validator: validatenewPwd, trigger: 'blur' }
                    ],
                    rePwd: [
                        { validator: validaterePwd, trigger: 'blur' }
                    ],
                }
            }
        },
        watch: {
        },
        methods:{
            //获取开关
            getswitch(){
                let _this = this;
                if(this.value3==false){
                    var viewFlag=0
                }else {
                    var viewFlag=1
                }
                let params={
                    viewFlag:viewFlag,
                }
                _this.Api.setting.distSetViewFlag(params).then((data)=>{
                    console.log("aaaaaaaaaaaaaaa",data)
                    this.$message({
                        message: "经纪人查看范围修改成功",
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message.error('经纪人查看范围修改失败');
                });
             console.log(this.value3,"aaaaaaaaaaaaaaaaaaaaaaa")
            },
            addstruct(formName){
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.Api.setting.distChangePwd(_this.ruleForm).then((data)=>{
                            console.log("aaaaaaaaaaaaaaa",data)
                            if(data.returnCode==10000){
                                this.dialogVisible=false
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            }else {
                                this.$message({
                                    message: data.msg,
                                    type: 'warning'
                                });
                            }
                        }).catch(() => {
                            this.$message.error('修改失败');
                        });

                    } else {
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialogVisible=false
            }
        }
    }
</script>
<style>
    .setup-view .el-dialog--small {
        width:517px;
    }
    .setup-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .setup-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
    .setup-view .el-dialog__body{
        padding: 32px 24px 0px 32px;
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
</style>

<style scoped rel="stylesheet/scss" lang="scss">
.setup-view{
    margin: 24px;
    .setup-change{
        margin-bottom: 16px;
        height:150px;
        background:rgba(255,255,255,1);
        border-radius:2px;
        .setup-change-title{
            display: flex;
            border-bottom: 1px #E9E9E9 solid;
            height: 55px;
            justify-content: space-between;
            .title-text{
                font-size:16px;
                font-family:PingFangSC-Medium;
                font-weight:500;
                color:rgba(0,0,0,0.85);
                line-height:24px;
                margin-left: 32px;
                align-self: center;
            }
            .button-text{
                margin-right: 32px;
                align-self: center;
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(24,144,255,1);
            }
        }
        .setup-change-msg{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.85);
            margin-left: 32px;
            margin-top: 24px;
        }
    }
}
.setup-view{
.addForm-form-input{
    display: flex;
    justify-content:flex-end;
}
.addForm-form-input-title{
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(0,0,0,0.85);
    line-height:22px;
    align-self: center;
    min-width: 70px;
    text-align: right;
    span{
        color: #FF0606;
        margin-bottom: -3px;
    }
}
.addForm-form-input-input{
    width:334px;
    height:32px;
    background:rgba(255,255,255,1);
    border-radius:4px;
    margin-right: 15px;
}
.cancel-button{
    padding: 0px;
    width:78px;
    height:32px;
    line-height:32px;
    border-radius:4px;
    border:1px #D9D9D9 solid;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(0,0,0,0.25);
    text-align: center;
}
.sure-button{
    padding: 0px;
    width:78px;
    height:32px;
    line-height:32px;
    border-radius:4px;
    background:rgba(24,144,255,1);
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: center;
}}
</style>